<template>
  <div class="overtrue">
    <div class="mask3" @click="GoHome"></div>
    <div class="date-card">
      <div v-if="!calendarBtn" class="arrow-down" @click="CalendarNo"></div>
      <div v-else class="arrow-up" @click="CalendarOff"></div>
    </div>
    <div class="today">{{ today }}</div>
    <div class="date">{{ date }}</div>
    <el-input v-if="!calendarBtn" v-model="searchValue" class="search-input" placeholder="快速搜索" :suffix-icon="Search" @focus="NoSearch" />
    <div class="date-mask1"></div>
    <div class="date-mask2"></div>
    <div class="date-box">
      <el-date-picker v-model="date" type="date" class="time-date-picker" placeholder="请选择日期" @blur="DateOff" @focus="DateNo" @change="DetermineDate" />
    </div>
    <Search_card :list="list" :switch="searchCardBtn" :input-value="searchValue" @homego="Gohome"></Search_card>
    <div class="list-box">
      <div v-for="(item, index) in list" :key="index" class="list-item-box">
        <div class="list-item" :class="[item.switch ? 'list-item-ok ' : '']">
          <div :class="[item.switch ? 'item-switch-active' : '']" class="item-switch" @click="ItemSwitch(index)"></div>
          <div class="item-text-box" @click="InDetail(index)">
            <div class="box-text-up">
              <span :class="[item.titleColor === 1 ? 'color' : '']" class="item-title">{{ item.title }}</span>
            </div>
            <div v-if="item.content.length !== 0" class="box-text-down">
              <span class="item-time">{{ item.time }}</span>
            </div>
          </div>
          <div class="item-edit">
            <div class="item-edit-img" @click="ItemEdit(index)"></div>
            <div class="item-edit-box">
              <div class="box-edit" @click="InDetail(index)"></div>
              <div class="box-del" @click="Delete(index)"></div>
              <button class="box-redel" @click="ReDelete(index)">确认删除</button>
            </div>
          </div>
        </div>
      </div>
      <div class="tail-box" @click="AddList">
        <div class="tail-logo">
          <div class="tail-logo-img"></div>
        </div>
        <div class="tail-text">添加事项</div>
      </div>
    </div>
    <Tail :switch="tailSwitch" @tail-return="TailReturn"></Tail>

    <Matter_content :switch="matterContentSwitch" :index="matterContentIndex" :item="matterContentItem" @matter-content-return="MatterContent"></Matter_content>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { reactive } from 'vue';
import { onMounted } from 'vue';
import { Search } from '@element-plus/icons-vue';
import Search_card from '../index/search_card.vue';
import Matter_content from './matter_content.vue';
import Tail from './tail.vue';

let tailSwitch = ref(0);
let matterContentItem = reactive({});
let matterContentIndex = ref();
let matterContentSwitch = ref(0);
let calendarBtn = ref(0);
let today = ref('今天');
let date = ref('');
let searchValue = ref('');
let list = reactive([
  {
    id: 1,
    switch: 0,
    time: '2020.04.20',
    title: '日报撰写',
    content: '',
  },
  {
    id: 2,
    switch: 0,
    time: '2020.04.20',
    title: '会议纪要',
    content: '这里是会sdffsdfsdfsdf议纪要：日报大家千万别忘了写哦～',
  },
  {
    id: 3,
    switch: 0,
    time: '2020.04.20',
    title: '左滑可以快速编辑该事项',
    content: '',
  },
  {
    id: 4,
    switch: 0,
    time: '上午07:30',
    title: '这里也可以显示时间',
    content: '这里是会sdffsdfsdfsdf议纪要：日报大家千万别忘了写哦～',
  },
  {
    id: 5,
    switch: 0,
    time: '2020.04.20',
    title: '当然，这里也可以添加不同颜色标签',
    titleColor: 1,
    content: '',
  },
  {
    id: 6,
    switch: 0,
    time: '2020.04.20',
    title: '点击这里GET更多技能吧',
    content: '这里是会sdffsdfsdfsdf议纪要：日报大家千万别忘了写哦～',
  },
  {
    id: 7,
    switch: 0,
    time: '2020.04.20',
    title: '点击此处标题可展开详细信息',
    content:
      "  <div>这里是任务信息描述的部分，该部分支持富文本编辑，并支持Markdown相关功能，具体的可以自己亲手尝试一下，尝试又不会导致怀孕，是不是。</div><div>并且知识丰富的样式.比如:</div><h3>标题1</h3><h4>标题2</h4><a href='https://www.baidu.com'>点击前往百度</a><div style='border-radius: 4px; width: 100%; background: rgba(36, 36, 36, 1); color: white'>asdfkjsdfskdfhsdjfhsskdf</div>",
  },
]);
let searchCardBtn = ref(0);

onMounted(() => {
  //获取今天日期
  date.value = GetToday();
});

function DateOff() {
  CalendarOff();
}
function DateNo() {
  CalendarNo();
}
function GoHome() {
  document.querySelector('.mask3').style.display = 'none';
  CalendarOff();
}
function GetToday() {
  const today = new Date();
  const options = { month: 'long', day: 'numeric', weekday: 'long' };
  const dateFormatter = new Intl.DateTimeFormat('zh-CN', options);
  const formattedDate = dateFormatter.format(today);

  return formattedDate;
}

function NoSearch() {
  console.log('打开搜索卡片');
  searchCardBtn.value = 1;
  document.querySelector('.search-input').style.zIndex = '101';
  document.querySelector('.search-input').style.left = '8%';
  document.querySelector('.search-input').style.right = '8%';
}

const Gohome = (index) => {
  if (index === -1) {
    document.querySelector('.search-input').style.zIndex = '1';
    document.querySelector('.search-input').style.left = '4.266667%';
    document.querySelector('.search-input').style.right = '4.266667%';
    searchValue.value = '';
    searchCardBtn.value = 0;
  } else {
    list.forEach((item, indext) => {
      if (item.id === index) {
        item.switch = 1;
        document.querySelectorAll('.list-item-box')[indext].style.display = 'none';
        return;
      }
    });
  }
};

function DetermineDate() {
  console.log('日期选择为', date);
  const originalDate = new Date(date.value);
  // 获取年、月、日和星期
  const year = originalDate.getFullYear();
  const month = originalDate.getMonth() + 1; // getMonth 返回值是0-11，需要加1
  const date1 = originalDate.getDate();
  const weekday = ['日', '一', '二', '三', '四', '五', '六'][originalDate.getDay()];
  // 格式化后的字符串
  //   const formattedDateStr = `${year}年${month}月${date1}日 星期${weekday}`;
  const formattedDateStr = `${month}月${date1}日星期${weekday}`;
  date.value = formattedDateStr;
  CalendarOff();
}

function CalendarNo() {
  console.log('打开日历');
  setTimeout(function () {
    document.querySelector('.date-box').style.zIndex = '100';
  }, 100);
  document.querySelector('.date-card').classList.add('date-card-down');
  calendarBtn.value = 1;
  document.querySelector('.mask3').style.display = 'block';
  document.querySelector('.mask3').style.zIndex = '1';
  document.querySelector('.date-box').classList.add('date-box-move');
  document.querySelector('.date-mask1').style.display = 'none';
  document.querySelector('.date-mask2').style.display = 'none';
}
function CalendarOff() {
  console.log('关闭日历');
  calendarBtn.value = 0;
  document.querySelector('.date-box').style.zIndex = '1';
  document.querySelector('.date-card').classList.remove('date-card-down');
  document.querySelector('.mask3').style.display = 'none';
  document.querySelector('.date-box').classList.remove('date-box-move');
  document.querySelector('.date-mask1').style.display = 'block';
  document.querySelector('.date-mask2').style.display = 'block';
}

function ItemSwitch(index) {
  list[index].switch = !list[index].switch;
  setTimeout(function () {
    document.querySelectorAll('.list-item-box')[index].style.display = 'none';
  }, 500);
}

function ItemEdit(index) {
  let temp = document.querySelectorAll('.list-item')[index].classList;
  for (let i = 0; i < temp.length; i++) {
    if (temp[i] === 'list-item-edit') {
      document.querySelectorAll('.list-item')[index].classList.remove('list-item-edit');
      return;
    }
  }
  document.querySelectorAll('.list-item').forEach((item) => {
    item.classList.remove('list-item-edit');
  });
  document.querySelectorAll('.list-item')[index].classList.add('list-item-edit');
  document.querySelectorAll('.box-redel')[index].style.display = 'none';
  document.querySelectorAll('.box-del')[index].style.display = 'block';
  document.querySelectorAll('.box-edit')[index].style.display = 'block';
}

function AddList() {
  console.log('添加事项');
  tailSwitch.value = 1;
}

function InDetail(index) {
  console.log('查看详细信息');
  matterContentIndex.value = index;
  matterContentSwitch.value = 1;
  matterContentItem = list[index];
}

function Delete(index) {
  console.log('删除事项');
  document.querySelectorAll('.box-redel')[index].style.display = 'block';
  document.querySelectorAll('.box-del')[index].style.display = 'none';
  document.querySelectorAll('.box-edit')[index].style.display = 'none';
}
function ReDelete(index) {
  console.log('真的删除事项', index);
  list[index].del = 1;
  document.querySelectorAll('.list-item-box')[index].style.background = 'red';
  document.querySelectorAll('.list-item')[index].classList.add('list-item-del');
  setTimeout(function () {
    document.querySelectorAll('.list-item-box')[index].style.display = 'none';
  }, 500);
}
function MatterContent(data) {
  matterContentSwitch.value = 0;
  if (data.type === 1) {
    list[data.index] = data.item;
    if (list[data.index].switch) {
      setTimeout(function () {
        document.querySelectorAll('.list-item-box')[data.index].style.display = 'none';
      }, 500);
    }
  } else if (data.type === 2) {
    console.log(data);
    list.splice(data.index, 1);
  }
}
function TailReturn(data) {
  if (data.type === 1) {
    //添加事项
    console.log('添加新事项');
    list.push(data.item);
  }
  tailSwitch.value = 0;
}
</script>

<style scoped>
.overtrue {
  height: 100%;
  aspect-ratio: 375/812;
  position: relative;
}
.today {
  z-index: 1;
  position: absolute;
  width: 100%;
  top: 11.82266%;
  font-weight: 500;
  font-size: 24px;
  text-align: center;
}
.date {
  z-index: 1;
  position: absolute;
  width: 100%;
  top: 16.37913%;
  font-weight: 500;
  font-size: 12px;
  text-align: center;
}
.search-input {
  z-index: 1;
  position: absolute;
  top: 20.812808%;
  left: 4.266667%;
  right: 4.266667%;
  width: auto;
  border-radius: 20px;
  transition: width 1s ease;
}
.date-card {
  z-index: 1;
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
  bottom: 69.334975%;
  border-radius: 0 0 16px 16px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}
.date-card-down {
  transform: translateY(42%);
}
.arrow-down {
  position: absolute;
  bottom: 1%;
  margin: auto;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 20px solid transparent; /* 左边透明 */
  border-right: 20px solid transparent; /* 右边透明 */
  border-top: 10px solid rgb(238, 238, 238); /* 上边为黑色实心 */
  cursor: pointer;
}
.arrow-up {
  position: absolute;
  bottom: 1%;
  margin: auto;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 20px solid transparent; /* 左边透明 */
  border-right: 20px solid transparent; /* 右边透明 */
  border-bottom: 10px solid rgb(238, 238, 238); /* 上边为黑色实心 */
  cursor: pointer;
}
.date-box {
  z-index: 1;
  position: absolute;
  top: 26%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%);
  overflow: hidden;
}
.date-box :hover {
  cursor: pointer;
}
.date-box-move {
  transform: translate(-50%, -130%);
  opacity: 1;
}
.time-date-picker {
  position: absolute;
  z-index: 1;
  opacity: 0;
}
.list-box {
  margin-top: 67%;
  width: 100%;
  height: 58.62068%;
  overflow-y: auto;
  overflow-x: hidden;
}
.list-item-ok {
  background-color: rgb(229, 240, 254);
  transform: translateX(150%);
  border-radius: 8px;
}
.list-item-edit {
  width: 100%;
  background-color: rgb(229, 240, 254);
  transform: translateX(-25%);
}
.list-item-del {
  width: 100%;
  background-color: rgb(229, 240, 254);
  transform: translateX(-150%);
}
.list-item-box {
  background-color: rgb(52, 120, 245);
  width: 100%;
  height: 10%;
  position: relative;
  display: flex;
  transition: transform 1s ease;
}
.list-item {
  background-color: rgb(255, 255, 255);
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  transition: transform 0.5s ease;
}
.item-switch {
  position: absolute;
  width: 6.413994%; /* 调整为需要的尺寸 */
  aspect-ratio: 1;
  border-radius: 50%; /* 将元素设置为圆形 */
  border: 1px solid rgb(52, 120, 246); /* 边框为蓝色，2px粗细 */
  background-color: rgb(237, 244, 254); /* 背景色为灰色 */
  cursor: pointer;
  left: 4.664723%;
  top: 50%;
  transform: translateY(-50%);
}
.item-switch-active {
  border: 1px solid blue;
  background-color: rgb(52, 120, 246);
}

.item-title {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 21.72px;
  color: rgba(0, 0, 0, 0.85);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0;
  text-align: left;
}
.item-time {
  margin: 0;
  width: 100%;
  position: absolute;
  left: 1%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 17.38px;
  color: rgba(0, 0, 0, 0.4);
  text-align: left;
  vertical-align: top;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.item-text-box {
  padding-top: 2%;
  padding-bottom: 1%;
  margin-left: 15.74344%;
  width: 72%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  cursor: pointer;
}
.box-text-up {
  position: relative;
  width: 100%;
  height: 50%;
  display: flex;
}
.box-text-down {
  position: relative;
  width: 100%;
  height: 50%;
}
.item-edit {
  position: relative;
  height: 100%;
  aspect-ratio: 1;
  padding: 3.5%;
}
.item-edit-box {
  position: absolute;
  width: 200%;
  height: 100%;
  top: 0;
  left: 98%;
  display: flex;
  background-color: rgb(255, 255, 255);
}
.box-edit {
  margin-top: -2%;
  width: 50%;
  height: 100%;
  background-image: url(../../../public/pencil.png);
  background-size: 55%;
  background-repeat: no-repeat; /* 防止图片重复 */
  background-position: center; /* 图片居中显示 */
  cursor: pointer;
}
.box-del {
  margin-top: -2%;
  width: 50%;
  height: 100%;
  background-image: url(../../../public/del.png);
  background-size: 55%;
  background-repeat: no-repeat; /* 防止图片重复 */
  background-position: center; /* 图片居中显示 */
  cursor: pointer;
}
.box-redel {
  display: none;
  border: none;
  width: 80%;
  height: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10.5%;
  border-radius: 12px;
  background: rgba(255, 59, 48, 1);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 16px;
  color: rgba(255, 255, 255, 1);
  vertical-align: top;
  cursor: pointer;
}
.item-edit-img {
  margin-top: -10%;
  height: 100%;
  aspect-ratio: 1;
  background-image: url(../../../public/edit.svg);
  background-size: cover;
  cursor: pointer;
}
.color {
  color: rgb(241, 154, 55);
}
.tail-box {
  width: 100%;
  height: 8%;
  display: flex;
  cursor: pointer;
}
.tail-logo {
  padding: 2%;
  margin-left: 2.5%;
  height: 100%;
  aspect-ratio: 1;
}
.tail-logo-img {
  margin-left: 5%;
  height: 100%;
  aspect-ratio: 1;
  background-size: cover;
  background-image: url(../../../public/add.svg);
  justify-content: center;
  align-items: center;
}
.tail-text {
  margin-left: 3%;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0px;
  color: rgba(0, 122, 255, 1);
  text-align: left;
  display: flex;
  align-items: center; /* 垂直居中 */
}
.mask3 {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: none;
}
.date-mask1 {
  position: absolute;
  z-index: 10;
  left: 0;
  top: 26.5%;
  width: 45%;
  height: 4%;
}
.date-mask2 {
  position: absolute;
  z-index: 10;
  right: 0;
  width: 45%;
  top: 26.5%;
  width: 45%;
  height: 4%;
}
@media (prefers-color-scheme: dark) {
  .overtrue {
    background-color: rgb(0, 0, 0);
  }
  .list-box * {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
  }
  .date-card {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
  }

  .arrow-down {
    border-top: 10px solid rgba(255, 255, 255, 0.1); /* 上边为黑色实心 */
  }
  .arrow-up {
    border-bottom: 10px solid rgba(255, 255, 255, 0.1); /* 上边为黑色实心 */
  }
  .box-redel {
    background: rgba(255, 59, 48, 1);
  }
  .list-item-box {
    background-color: rgb(52, 120, 245);
  }
  .item-switch-active {
    border: 1px solid blue;
    background-color: rgb(52, 120, 246);
  }
}
</style>
